// index.js
// 业务领域分析看板核心交互与图表渲染脚本
// 主要功能：模态框穿透、图表渲染入口、静态数据结构示例
// 所有内容均有中文注释，便于理解和维护

// =====================
// 1. 图表实例管理（避免重复创建）
// =====================
const chartInstances = {};

// 销毁指定canvas的Chart实例
function destroyChart(canvasId) {
    if (chartInstances[canvasId]) {
        chartInstances[canvasId].destroy();
        delete chartInstances[canvasId];
    }
}

// 创建Chart实例并保存引用
function createChart(canvasId, config) {
    // 先销毁已存在的实例
    destroyChart(canvasId);
    // 创建新实例并保存
    chartInstances[canvasId] = new Chart(document.getElementById(canvasId), config);
    return chartInstances[canvasId];
}

// =====================
// 2. 模态框穿透查询逻辑
// =====================
const modal = document.getElementById('detailModal');
const modalTitle = document.getElementById('modalTitle');
const modalContent = document.getElementById('modalContent');
const closeModal = document.getElementById('closeModal');
const closeModalBtn = document.getElementById('closeModalBtn');

// 打开模态框，type为指标标识
window.showDetail = function (type) {
    modal.classList.remove('hidden');
    // 根据type填充不同内容
    renderModalContent(type);
};

closeModal.onclick = closeModalBtn.onclick = function () {
    modal.classList.add('hidden');
};

// =====================
// 3. 模态内容渲染（全覆盖）
// =====================
function renderModalContent(type) {
    let title = '';
    let html = '';
    switch (type) {
        // 核心指标穿透查询
        case 'totalRevenue':
            title = '总收入金额 - 趋势分析';
            html = `
                <div class="mb-3 p-3 bg-light rounded text-sm text-gray-700">
                    <b>指标解读</b><br>
                    总收入金额反映了企业在四大业务领域的整体收入规模，是衡量企业经营规模和市场表现的关键指标。同比和环比增长表明企业在收入增长方面的持续性和增长趋势。
                </div>
                <div class="flex flex-col md:flex-row gap-4 items-stretch">
                    <div class="flex-1 bg-light rounded-lg p-3 flex flex-col items-center justify-center">
                        <h4 class="text-md font-medium mb-2">年度趋势</h4>
                        <canvas id="modalTotalRevenueChart" height="120"></canvas>
                    </div>
                    <div class="flex-1 bg-light rounded-lg p-3 flex flex-col items-center justify-center">
                        <h4 class="text-md font-medium mb-2">业务领域分布</h4>
                        <canvas id="modalRevenueDistributionChart" height="120"></canvas>
                    </div>
                </div>
            `;
            setTimeout(() => {
                // 年度趋势折线图
                createChart('modalTotalRevenueChart', {
                    type: 'line',
                    data: {
                        labels: ['2019', '2020', '2021', '2022', '2023'],
                        datasets: [{
                            label: '总收入(万元)',
                            data: [2800, 3000, 3200, 3400, 3600],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22,93,255,0.1)',
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { display: true } },
                        scales: {
                            x: { grid: { display: false }, ticks: { color: '#86909C' } },
                            y: { grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { color: '#86909C' } }
                        }
                    }
                });
                // 业务领域分布饼图
                createChart('modalRevenueDistributionChart', {
                    type: 'doughnut',
                    data: {
                        labels: ['横向', '纵向', '预研', '民品'],
                        datasets: [{
                            data: [27.8, 33.3, 16.7, 22.2],
                            backgroundColor: ['#165DFF', '#0FC6C2', '#FF7D00', '#F53F3F'],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { position: 'bottom' } }
                    }
                });
            }, 100);
            break;
        case 'totalCost':
            title = '总成本金额 - 趋势分析';
            html = `<canvas id="modalTotalCostChart" height="300"></canvas>`;
            setTimeout(() => renderLineChart('modalTotalCostChart', '总成本(万元)', [2200, 2350, 2500, 2650, 2800], ['2019', '2020', '2021', '2022', '2023']), 100);
            break;
        case 'totalProfit':
            title = '总利润金额 - 趋势分析';
            html = `<canvas id="modalTotalProfitChart" height="300"></canvas>`;
            setTimeout(() => renderLineChart('modalTotalProfitChart', '总利润(万元)', [600, 650, 700, 750, 800], ['2019', '2020', '2021', '2022', '2023']), 100);
            break;
        case 'profitMargin':
            title = '整体利润率 - 趋势分析';
            html = `<canvas id="modalProfitMarginChart" height="300"></canvas>`;
            setTimeout(() => renderLineChart('modalProfitMarginChart', '利润率(%)', [21.4, 21.7, 21.9, 22.1, 22.2], ['2019', '2020', '2021', '2022', '2023']), 100);
            break;
        case 'businessFields':
            title = '业务领域数量 - 详细说明';
            html = `
                <div class="mb-3 p-3 bg-light rounded text-sm text-gray-700">
                    <b>业务领域说明</b><br>
                    企业目前拥有四大核心业务领域：横向业务、纵向业务、预研业务、民品业务。每个业务领域都有其独特的市场定位和盈利模式。
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-light rounded-lg p-4">
                        <h4 class="font-medium mb-2">横向业务</h4>
                        <p class="text-sm text-gray-600">面向市场的横向拓展业务，收入占比27.8%</p>
                    </div>
                    <div class="bg-light rounded-lg p-4">
                        <h4 class="font-medium mb-2">纵向业务</h4>
                        <p class="text-sm text-gray-600">深度垂直的专业化业务，收入占比33.3%</p>
                    </div>
                    <div class="bg-light rounded-lg p-4">
                        <h4 class="font-medium mb-2">预研业务</h4>
                        <p class="text-sm text-gray-600">前瞻性研发创新业务，收入占比16.7%</p>
                    </div>
                    <div class="bg-light rounded-lg p-4">
                        <h4 class="font-medium mb-2">民品业务</h4>
                        <p class="text-sm text-gray-600">民用产品和服务业务，收入占比22.2%</p>
                    </div>
                </div>
            `;
            break;

        // 收入分析穿透查询
        case 'revenueComparison':
            title = '各业务领域收入对比 - 详细分析';
            html = `
                <div class="mb-3 p-3 bg-light rounded text-sm text-gray-700">
                    <b>分析说明</b><br>
                    展示了横向、纵向、预研、民品四大业务领域的收入对比情况，纵向业务收入最高，预研业务收入最低。
                </div>
                <canvas id="modalRevenueComparisonChart" height="300"></canvas>
            `;
            setTimeout(() => renderBarChart('modalRevenueComparisonChart', ['横向', '纵向', '预研', '民品'], [1000, 1200, 600, 800], '收入(万元)'), 100);
            break;
        case 'revenueTrend':
            title = '收入时间趋势 - 详细分析';
            html = `<canvas id="modalRevenueTrendChart" height="300"></canvas>`;
            setTimeout(() => {
                const years = ['2019', '2020', '2021', '2022', '2023'];
                createChart('modalRevenueTrendChart', {
                    type: 'line',
                    data: {
                        labels: years,
                        datasets: [
                            {
                                label: '横向业务',
                                data: [750, 800, 850, 900, 1000],
                                borderColor: '#165DFF',
                                backgroundColor: 'rgba(22,93,255,0.1)',
                                tension: 0.4
                            },
                            {
                                label: '纵向业务',
                                data: [900, 950, 1000, 1100, 1200],
                                borderColor: '#0FC6C2',
                                backgroundColor: 'rgba(15,198,194,0.1)',
                                tension: 0.4
                            },
                            {
                                label: '预研业务',
                                data: [450, 480, 520, 560, 600],
                                borderColor: '#FF7D00',
                                backgroundColor: 'rgba(255,125,0,0.1)',
                                tension: 0.4
                            },
                            {
                                label: '民品业务',
                                data: [700, 770, 830, 840, 800],
                                borderColor: '#F53F3F',
                                backgroundColor: 'rgba(245,63,63,0.1)',
                                tension: 0.4
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { position: 'bottom' } },
                        scales: {
                            x: { grid: { display: false } },
                            y: { grid: { color: 'rgba(0,0,0,0.05)' } }
                        }
                    }
                });
            }, 100);
            break;
        case 'customerRevenue':
            title = '客户类型收入分布 - 详细分析';
            html = `<canvas id="modalCustomerRevenueChart" height="300"></canvas>`;
            setTimeout(() => renderPieChart('modalCustomerRevenueChart', ['大客户', '中小客户'], [65, 35], 3600), 100);
            break;
        case 'productRevenue':
            title = '产品类别收入占比 - 详细分析';
            html = `<canvas id="modalProductRevenueChart" height="300"></canvas>`;
            setTimeout(() => renderPieChart('modalProductRevenueChart', ['产品类别1', '产品类别2', '产品类别3'], [45, 35, 20], 3600), 100);
            break;

        // 成本分析穿透查询
        case 'costComparison':
            title = '各业务领域总成本对比 - 详细分析';
            html = `<canvas id="modalCostComparisonChart" height="300"></canvas>`;
            setTimeout(() => renderBarChart('modalCostComparisonChart', ['横向', '纵向', '预研', '民品'], [800, 900, 500, 600], '成本(万元)'), 100);
            break;
        case 'costStructure':
            title = '成本结构分析 - 详细分析';
            html = `<canvas id="modalCostStructureChart" height="300"></canvas>`;
            setTimeout(() => renderStackedBarChart('modalCostStructureChart'), 100);
            break;
        case 'costTypeRatio':
            title = '直接成本与间接成本占比 - 详细分析';
            html = `<canvas id="modalCostTypeRatioChart" height="300"></canvas>`;
            setTimeout(() => renderPieChart('modalCostTypeRatioChart', ['直接成本', '间接成本'], [60, 40], 2800), 100);
            break;
        case 'costTrend':
            title = '成本时间趋势 - 详细分析';
            html = `<canvas id="modalCostTrendChart" height="300"></canvas>`;
            setTimeout(() => renderLineChart('modalCostTrendChart', '总成本(万元)', [2200, 2350, 2500, 2650, 2800], ['2019', '2020', '2021', '2022', '2023']), 100);
            break;

        // 利润分析穿透查询
        case 'profitComparison':
            title = '各业务领域利润对比 - 详细分析';
            html = `<canvas id="modalProfitComparisonChart" height="300"></canvas>`;
            setTimeout(() => renderBarChart('modalProfitComparisonChart', ['横向', '纵向', '预研', '民品'], [200, 300, 100, 200], '利润(万元)'), 100);
            break;
        case 'profitContribution':
            title = '利润贡献率分布 - 详细分析';
            html = `<canvas id="modalProfitContributionChart" height="300"></canvas>`;
            setTimeout(() => renderPieChart('modalProfitContributionChart', ['横向', '纵向', '预研', '民品'], [25, 37.5, 12.5, 25], 800), 100);
            break;
        case 'profitMarginComparison':
            title = '各业务领域利润率对比 - 详细分析';
            html = `<canvas id="modalProfitMarginComparisonChart" height="300"></canvas>`;
            setTimeout(() => renderBarChart('modalProfitMarginComparisonChart', ['横向', '纵向', '预研', '民品'], [20, 25, 16.7, 25], '利润率(%)'), 100);
            break;
        case 'profitTrend':
            title = '利润时间趋势 - 详细分析';
            html = `<canvas id="modalProfitTrendChart" height="300"></canvas>`;
            setTimeout(() => renderLineChart('modalProfitTrendChart', '总利润(万元)', [600, 650, 700, 750, 800], ['2019', '2020', '2021', '2022', '2023']), 100);
            break;

        // 综合分析穿透查询
        case 'businessSynergy':
            title = '业务协同分析 - 详细分析';
            html = `
                <div class="mb-3 p-3 bg-light rounded text-sm text-gray-700">
                    <b>分析说明</b><br>
                    展示了不同业务领域间的协同潜力和资源互补情况，横向业务与民品业务在客户群体上存在重叠。
                </div>
                <canvas id="modalBusinessSynergyChart" height="300"></canvas>
            `;
            setTimeout(() => renderRadarChart('modalBusinessSynergyChart'), 100);
            break;
        case 'costOptimization':
            title = '成本优化分析 - 详细分析';
            html = `<canvas id="modalCostOptimizationChart" height="300"></canvas>`;
            setTimeout(() => renderStackedBarChart('modalCostOptimizationChart'), 100);
            break;

        // 明细表穿透查询
        case 'businessDetailTable':
            title = '业务领域明细表 - 详细数据';
            html = `
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 font-semibold text-gray-700">业务领域</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">收入(万元)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">成本(万元)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">利润(万元)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">利润率(%)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">利润贡献率(%)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">横向</td>
                                <td class="py-3 px-4 text-right">1,000</td>
                                <td class="py-3 px-4 text-right">800</td>
                                <td class="py-3 px-4 text-right">200</td>
                                <td class="py-3 px-4 text-right">20%</td>
                                <td class="py-3 px-4 text-right">25%</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">纵向</td>
                                <td class="py-3 px-4 text-right">1,200</td>
                                <td class="py-3 px-4 text-right">900</td>
                                <td class="py-3 px-4 text-right">300</td>
                                <td class="py-3 px-4 text-right">25%</td>
                                <td class="py-3 px-4 text-right">37.5%</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">预研</td>
                                <td class="py-3 px-4 text-right">600</td>
                                <td class="py-3 px-4 text-right">500</td>
                                <td class="py-3 px-4 text-right">100</td>
                                <td class="py-3 px-4 text-right">16.7%</td>
                                <td class="py-3 px-4 text-right">12.5%</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="py-3 px-4">民品</td>
                                <td class="py-3 px-4 text-right">800</td>
                                <td class="py-3 px-4 text-right">600</td>
                                <td class="py-3 px-4 text-right">200</td>
                                <td class="py-3 px-4 text-right">25%</td>
                                <td class="py-3 px-4 text-right">25%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `;
            break;
        case 'costDetailTable':
            title = '成本构成明细表 - 详细数据';
            html = `
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 font-semibold text-gray-700">成本类型</th>
                                <th class="text-left py-3 px-4 font-semibold text-gray-700">成本项目</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">金额(万元)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">占比(%)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">直接成本</td>
                                <td class="py-3 px-4">材料费</td>
                                <td class="py-3 px-4 text-right">1,120</td>
                                <td class="py-3 px-4 text-right">40%</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">直接成本</td>
                                <td class="py-3 px-4">外协费</td>
                                <td class="py-3 px-4 text-right">560</td>
                                <td class="py-3 px-4 text-right">20%</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">间接成本</td>
                                <td class="py-3 px-4">管理费</td>
                                <td class="py-3 px-4 text-right">420</td>
                                <td class="py-3 px-4 text-right">15%</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="py-3 px-4">间接成本</td>
                                <td class="py-3 px-4">工资费</td>
                                <td class="py-3 px-4 text-right">700</td>
                                <td class="py-3 px-4 text-right">25%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `;
            break;
        default:
            title = '详细分析';
            html = '<div>暂无详细内容</div>';
    }
    modalTitle.innerText = title;
    modalContent.innerHTML = html;
}

// =====================
// 4. 图表渲染函数
// =====================
// 折线图
function renderLineChart(canvasId, label, data, labels) {
    createChart(canvasId, {
        type: 'line',
        data: {
            labels: labels || ['一月', '二月', '三月', '四月', '五月'],
            datasets: [{
                label: label,
                data: data,
                borderColor: '#165DFF',
                backgroundColor: 'rgba(22,93,255,0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: true } },
            scales: {
                x: { grid: { display: false }, ticks: { color: '#86909C' } },
                y: { grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { color: '#86909C' } }
            }
        }
    });
}

// 柱状图
function renderBarChart(canvasId, labels, data, label) {
    const colors = ['#165DFF', '#0FC6C2', '#FF7D00', '#F53F3F'];
    createChart(canvasId, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: label,
                data: data,
                backgroundColor: colors,
                borderWidth: 0,
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    titleColor: '#1D2129',
                    bodyColor: '#4E5969',
                    borderColor: 'rgba(22, 93, 255, 0.2)',
                    borderWidth: 1,
                    padding: 12,
                    boxPadding: 6,
                    usePointStyle: true
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { color: '#86909C', font: { size: 12 } }
                },
                y: {
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: { color: '#86909C', font: { size: 12 } },
                    title: { display: true, text: label, color: '#86909C', font: { size: 12 } }
                }
            }
        }
    });
}

// 饼图
function renderPieChart(canvasId, labels, data, totalValue = null) {
    const colors = ['#165DFF', '#0FC6C2', '#FF7D00', '#F53F3F', '#86909C'];
    createChart(canvasId, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: colors,
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    titleColor: '#1D2129',
                    bodyColor: '#4E5969',
                    borderColor: 'rgba(22, 93, 255, 0.2)',
                    borderWidth: 1,
                    padding: 12,
                    boxPadding: 6,
                    usePointStyle: true,
                    callbacks: {
                        label: function (context) {
                            const percentage = context.parsed;
                            const numericValue = totalValue ? Math.round(totalValue * percentage / 100) : null;
                            return `${context.label}: ${percentage}%${numericValue ? ` (${numericValue}万元)` : ''}`;
                        }
                    }
                }
            }
        }
    });
}

// 堆积柱状图
function renderStackedBarChart(canvasId) {
    createChart(canvasId, {
        type: 'bar',
        data: {
            labels: ['横向', '纵向', '预研', '民品'],
            datasets: [
                {
                    label: '材料费',
                    data: [320, 360, 200, 240],
                    backgroundColor: '#165DFF'
                },
                {
                    label: '外协费',
                    data: [160, 180, 100, 120],
                    backgroundColor: '#0FC6C2'
                },
                {
                    label: '管理费',
                    data: [120, 135, 75, 90],
                    backgroundColor: '#FF7D00'
                },
                {
                    label: '工资费',
                    data: [200, 225, 125, 150],
                    backgroundColor: '#F53F3F'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: { display: false }
                },
                y: {
                    stacked: true,
                    grid: { color: 'rgba(0, 0, 0, 0.05)' }
                }
            }
        }
    });
}

// 雷达图
function renderRadarChart(canvasId) {
    createChart(canvasId, {
        type: 'radar',
        data: {
            labels: ['客户重叠度', '资源互补性', '技术协同性', '市场协同性', '成本协同性'],
            datasets: [
                {
                    label: '横向-民品',
                    data: [85, 70, 60, 80, 65],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22,93,255,0.2)'
                },
                {
                    label: '纵向-预研',
                    data: [60, 85, 90, 50, 75],
                    borderColor: '#0FC6C2',
                    backgroundColor: 'rgba(15,198,194,0.2)'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            },
            scales: {
                r: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        stepSize: 20
                    }
                }
            }
        }
    });
}

// 生成图例HTML
function generateLegend(containerId, labels, data, colors, totalValue = null) {
    const legendContainer = document.getElementById(containerId);
    if (!legendContainer) return;

    let legendHTML = '';
    labels.forEach((label, index) => {
        const percentage = data[index];
        const color = colors[index];
        // 计算数字值（如果有总数的话）
        const numericValue = totalValue ? Math.round(totalValue * percentage / 100) : null;

        legendHTML += `
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 rounded-full" style="background-color: ${color}"></div>
                    <span class="text-sm text-gray-700">${label}</span>
                </div>
                <span class="text-sm font-medium text-gray-900">
                    ${percentage}%${numericValue ? ` (${numericValue})` : ''}
                </span>
            </div>
        `;
    });
    legendContainer.innerHTML = legendHTML;
}

// =====================
// 5. 页面加载后自动渲染图表
// =====================
window.onload = function () {
    // 清理所有现有的Chart实例，避免重复创建
    Object.keys(chartInstances).forEach(canvasId => {
        destroyChart(canvasId);
    });

    // 侧边栏切换功能
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('mainContent');
    const toggleSidebar = document.getElementById('toggleSidebar');
    if (sidebar && mainContent && toggleSidebar) {
        toggleSidebar.onclick = function () {
            sidebar.classList.toggle('w-64');
            sidebar.classList.toggle('w-16');
            mainContent.classList.toggle('pl-64');
            mainContent.classList.toggle('pl-16');
            sidebar.classList.toggle('sidebar-collapsed');
        };
    }

    // 收入分析图表
    // 各业务领域收入对比
    if (document.getElementById('revenueComparisonChart')) {
        renderBarChart('revenueComparisonChart', ['横向', '纵向', '预研', '民品'], [1000, 1200, 600, 800], '收入(万元)');
    }

    // 收入时间趋势
    if (document.getElementById('revenueTrendChart')) {
        const years = ['2019', '2020', '2021', '2022', '2023'];
        createChart('revenueTrendChart', {
            type: 'line',
            data: {
                labels: years,
                datasets: [
                    {
                        label: '横向业务',
                        data: [750, 800, 850, 900, 1000],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22,93,255,0.1)',
                        tension: 0.4
                    },
                    {
                        label: '纵向业务',
                        data: [900, 950, 1000, 1100, 1200],
                        borderColor: '#0FC6C2',
                        backgroundColor: 'rgba(15,198,194,0.1)',
                        tension: 0.4
                    },
                    {
                        label: '预研业务',
                        data: [450, 480, 520, 560, 600],
                        borderColor: '#FF7D00',
                        backgroundColor: 'rgba(255,125,0,0.1)',
                        tension: 0.4
                    },
                    {
                        label: '民品业务',
                        data: [700, 770, 830, 840, 800],
                        borderColor: '#F53F3F',
                        backgroundColor: 'rgba(245,63,63,0.1)',
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { boxWidth: 12, padding: 15, color: '#4E5969', font: { size: 12 } }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#1D2129',
                        bodyColor: '#4E5969',
                        borderColor: 'rgba(22, 93, 255, 0.2)',
                        borderWidth: 1,
                        padding: 12,
                        boxPadding: 6,
                        usePointStyle: true
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: '#86909C', font: { size: 12 } }
                    },
                    y: {
                        grid: { color: 'rgba(0, 0, 0, 0.05)' },
                        ticks: { color: '#86909C', font: { size: 12 } },
                        title: { display: true, text: '收入(万元)', color: '#86909C', font: { size: 12 } }
                    }
                }
            }
        });
    }

    // 客户类型收入分布
    if (document.getElementById('customerRevenueChart')) {
        const labels = ['大客户', '中小客户'];
        const data = [65, 35];
        const colors = ['#165DFF', '#0FC6C2'];

        createChart('customerRevenueChart', {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#1D2129',
                        bodyColor: '#4E5969',
                        borderColor: 'rgba(22, 93, 255, 0.2)',
                        borderWidth: 1,
                        padding: 12,
                        boxPadding: 6,
                        usePointStyle: true,
                        callbacks: {
                            label: function (context) {
                                const percentage = context.parsed;
                                const numericValue = Math.round(3600 * percentage / 100);
                                return `${context.label}: ${percentage}% (${numericValue}万元)`;
                            }
                        }
                    }
                }
            }
        });

        generateLegend('customerRevenueLegend', labels, data, colors, 3600);
    }

    // 产品类别收入占比
    if (document.getElementById('productRevenueChart')) {
        const labels = ['产品类别1', '产品类别2', '产品类别3'];
        const data = [45, 35, 20];
        const colors = ['#165DFF', '#0FC6C2', '#FF7D00'];

        createChart('productRevenueChart', {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#1D2129',
                        bodyColor: '#4E5969',
                        borderColor: 'rgba(22, 93, 255, 0.2)',
                        borderWidth: 1,
                        padding: 12,
                        boxPadding: 6,
                        usePointStyle: true,
                        callbacks: {
                            label: function (context) {
                                const percentage = context.parsed;
                                const numericValue = Math.round(3600 * percentage / 100);
                                return `${context.label}: ${percentage}% (${numericValue}万元)`;
                            }
                        }
                    }
                }
            }
        });

        generateLegend('productRevenueLegend', labels, data, colors, 3600);
    }

    // 成本分析图表
    // 各业务领域总成本对比
    if (document.getElementById('costComparisonChart')) {
        renderBarChart('costComparisonChart', ['横向', '纵向', '预研', '民品'], [800, 900, 500, 600], '成本(万元)');
    }

    // 成本结构分析
    if (document.getElementById('costStructureChart')) {
        renderStackedBarChart('costStructureChart');
    }

    // 直接成本与间接成本占比
    if (document.getElementById('costTypeRatioChart')) {
        const labels = ['直接成本', '间接成本'];
        const data = [60, 40];
        const colors = ['#165DFF', '#0FC6C2'];

        createChart('costTypeRatioChart', {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#1D2129',
                        bodyColor: '#4E5969',
                        borderColor: 'rgba(22, 93, 255, 0.2)',
                        borderWidth: 1,
                        padding: 12,
                        boxPadding: 6,
                        usePointStyle: true,
                        callbacks: {
                            label: function (context) {
                                const percentage = context.parsed;
                                const numericValue = Math.round(2800 * percentage / 100);
                                return `${context.label}: ${percentage}% (${numericValue}万元)`;
                            }
                        }
                    }
                }
            }
        });

        generateLegend('costTypeRatioLegend', labels, data, colors, 2800);
    }

    // 成本时间趋势
    if (document.getElementById('costTrendChart')) {
        renderLineChart('costTrendChart', '总成本(万元)', [2200, 2350, 2500, 2650, 2800], ['2019', '2020', '2021', '2022', '2023']);
    }

    // 利润分析图表
    // 各业务领域利润对比
    if (document.getElementById('profitComparisonChart')) {
        renderBarChart('profitComparisonChart', ['横向', '纵向', '预研', '民品'], [200, 300, 100, 200], '利润(万元)');
    }

    // 利润贡献率分布
    if (document.getElementById('profitContributionChart')) {
        const labels = ['横向', '纵向', '预研', '民品'];
        const data = [25, 37.5, 12.5, 25];
        const colors = ['#165DFF', '#0FC6C2', '#FF7D00', '#F53F3F'];

        createChart('profitContributionChart', {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#1D2129',
                        bodyColor: '#4E5969',
                        borderColor: 'rgba(22, 93, 255, 0.2)',
                        borderWidth: 1,
                        padding: 12,
                        boxPadding: 6,
                        usePointStyle: true,
                        callbacks: {
                            label: function (context) {
                                const percentage = context.parsed;
                                const numericValue = Math.round(800 * percentage / 100);
                                return `${context.label}: ${percentage}% (${numericValue}万元)`;
                            }
                        }
                    }
                }
            }
        });

        generateLegend('profitContributionLegend', labels, data, colors, 800);
    }

    // 各业务领域利润率对比
    if (document.getElementById('profitMarginComparisonChart')) {
        renderBarChart('profitMarginComparisonChart', ['横向', '纵向', '预研', '民品'], [20, 25, 16.7, 25], '利润率(%)');
    }

    // 利润时间趋势
    if (document.getElementById('profitTrendChart')) {
        renderLineChart('profitTrendChart', '总利润(万元)', [600, 650, 700, 750, 800], ['2019', '2020', '2021', '2022', '2023']);
    }

    // 综合分析图表
    // 业务协同分析
    if (document.getElementById('businessSynergyChart')) {
        renderRadarChart('businessSynergyChart');
    }

    // 成本优化分析
    if (document.getElementById('costOptimizationChart')) {
        renderStackedBarChart('costOptimizationChart');
    }
}; 